<template>
    <div class="contract">
        <div class="header">
            <el-button type="primary" plain><el-icon>
                    <Plus />
                </el-icon>新增</el-button>
            <el-button type="success" plain><el-icon>
                    <Edit />
                </el-icon>修改</el-button>
            <el-button type="danger" plain><el-icon>
                    <Delete />
                </el-icon>删除</el-button>
            <el-button type="warning" plain><el-icon>
                    <Download />
                </el-icon>导出</el-button>
        </div>
        <div class="toBe">
            <el-tag type="primary">待处理任务列表</el-tag>
            <el-table :data="committedList" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="客户姓名" width="150" />
                <el-table-column prop="phone" label="手机号码" width="120" />
                <el-table-column prop="channelName" label="渠道名称" width="120" />
                <el-table-column prop="activityName" label="活动名称" width="120" />
                <el-table-column prop="courseName" label="课程名称" width="120" />
                <el-table-column prop="contractPrice" label="合同金额" width="120" />
                <el-table-column label="操作" min-width="150">
                </el-table-column>
            </el-table>
        </div>
        <div class="toBe">
            <el-tag type="success">已提交未审批任务列表</el-tag>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="date" label="客户姓名" width="150" />
                <el-table-column prop="name" label="手机号码" width="120" />
                <el-table-column prop="state" label="渠道名称" width="120" />
                <el-table-column prop="city" label="活动名称" width="120" />
                <el-table-column prop="address" label="课程名称" width="120" />
                <el-table-column prop="zip" label="合同金额" width="120" />
            </el-table>
        </div>
        <div class="toBe">
            <el-tag type="danger">审批完成任务列表</el-tag>
            <el-table :data="contractList" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="客户姓名" width="150" />
                <el-table-column prop="phone" label="手机号码" width="120" />
                <el-table-column prop="channelName" label="渠道名称" width="120" />
                <el-table-column prop="activityName" label="活动名称" width="120" />
                <el-table-column prop="courseName" label="课程名称" width="120" />
                <el-table-column prop="contractPrice" label="合同金额" width="120" />
                <el-table-column label="操作" min-width="150">
                    <template #default="scope">
                        <span class="l" @click="openDialog(scope.row.contractId)"><el-icon>
                                <View />
                            </el-icon>查看</span>
                        <span class="r" @click="openDialog(scope.row.contractId)"><el-icon>
                                <Document />
                            </el-icon>预览</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" title="合同详情" width="500" :before-close="handleClose">
            <div class="dialog">
                <div class="h">
                    <div class="con">
                        <h4>合同编号</h4>
                        <p>{{ contractView.contractId }}</p>
                    </div>
                    <div class="con">
                        <h4>客户手机号码</h4>
                        <p>{{ contractView.phone }}</p>
                    </div>
                    <div class="con">
                        <h4>客户姓名</h4>
                        <p>{{ contractView.name }}</p>
                    </div>
                </div>
                <div class="h">
                    <div class="con">
                        <h4>课程分类</h4>
                        <p v-if="contractView.discountType == 2">游泳类</p>
                        <p v-else>舞蹈类</p>
                    </div>
                    <div class="con">
                        <h4>课程名</h4>
                        <p>{{ contractView.courseName }}</p>
                    </div>
                    <div class="con">
                        <h4>渠道名称</h4>
                        <p>{{ contractView.channelName }}</p>
                    </div>
                </div>
                <div class="h">
                    <div class="con">
                        <h4>活动名称</h4>
                        <p>{{ contractView.activityName }}</p>
                    </div>
                    <div class="con">
                        <h4>合同状态</h4>
                        <p>审批通过</p>
                    </div>
                    <div class="con">
                        <h4>合同金额</h4>
                        <p>{{ contractView.contractPrice }}</p>
                    </div>
                </div>

                <div class="h">
                    <div class="con">
                        <h4>课程价格</h4>
                        <p>{{ contractView.coursePrice }}</p>
                    </div>
                    <div class="con">
                        <h4>折扣类型</h4>
                        <p>代金券</p>
                    </div>
                    <div class="con">
                        <h4>合同审批人</h4>
                        <p>{{ contractView.approveUserName }}</p>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { contractApproved, contractCommitted, contractUser } from "../../../api/index"
import { ElMessage, ElMessageBox } from 'element-plus';
const contractList = ref([])
const committedList = ref([])
const contractView = ref({
    contractId: 0,
    phone: "",
    name: "",
    discountType: 0,
    courseName: "",
    channelName: "",
    activityName: "",
    contractPrice: 0,
    coursePrice: 0,
    discount: 0,
    approveUserName: ""
})
const getContractList = () => {
    contractApproved().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询合同失败");
        contractList.value = res.data.rows;
    });
    contractCommitted().then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询合同失败");
        committedList.value = res.data.rows;
    });
}
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定要关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const openDialog = (id: any) => {
    contractUser(id).then((res: any) => {
        if (res.data.code != 200) return ElMessage.error("查询合同失败");
        contractView.value = res.data.data;
        console.log(contractView.value)
    });
    dialogVisible.value = true
}
onMounted(() => {
    getContractList()
})

</script>

<style scoped lang="scss">
.contract {
    width: 100%;
    height: 100%;
    padding: 20px;

    .header {
        margin-bottom: 10px;

        i {
            margin-right: 10px;
        }
    }

    .toBe {
        margin-bottom: 20px;

        .l,
        .r {
            color: #409dfe;
            cursor: pointer;
            display: inline-block;

            i {
                padding-top: 4px;
            }
        }

        .r {
            margin-left: 10px;
        }
    }
}

.dialog {
    .h {
        display: flex;
        margin-bottom: 10px;

        .con {
            width: 33%;

            h4 {
                font-style: italic;
                font-weight: 600;
            }
        }
    }
}
</style>